<style>
    .tool{
        width: 100%;height:40px;position: relative;
    }
    .tool-search {
        width: 300px;
        position: absolute;
        right: 0;
    }

    .tool-search > input {
        height: 34px;
        line-height: 18px;
    }

    .search-btn {
        position: absolute;
        right: 1px;
        top: 1px;
        width: 50px;
        height: 32px;
        text-align: center;
        line-height: 28px;
        border-left: 1px solid #E6E6E6;
        background: #F2F2F2;
    }

    .search-btn > img {
        width: 25px;
        margin-left: -5px;
        cursor: pointer;
    }
    .layui-table-body .layui-table-cell{
        line-height: 80px;
        height: 80px;
    }
    .layui-table-view .layui-table td, .layui-table-view .layui-table th {
        border-right: none;
    }
    .layui-table .layui-form-switch {
        height: 18px;
        line-height: 18px;
        border-radius: 10px;
        width: 38px;
    }
    .layui-table .layui-form-switch i {
        top: 1px;
        left:3px;
    }
    .layui-table .layui-form-onswitch i {
        top: 1px;
        left:30px;
    }

    .layui-input, .layui-select, .layui-textarea {
        height: 34px;
    }
    .layui-form-select dl dd, .layui-form-select dl dt {
        line-height: 32px;
    }
    .goods-thumb-box{
        float:left;position: relative;
    }
    .goods-qrcode{
        display: none;
    }
    .goods-qrcode .bg-qrcode{
        width: 60px;
        height: 60px;
        position: absolute;
        top:12px;left:0;
        background: #000000;
        opacity: 0;
    }
    .goods-qrcode .qrcode{
        position: absolute;top:32px;left:23px;
        cursor: pointer;
    }
</style>
<div>
    <div class="tool">
        <div class="layui-input-inline layui-form" style="position: absolute;left:0;top:2px;">
            <button id="goods-add" class="layui-btn layui-btn-sm" option="0"><i class="layui-icon">&#xe654;</i>添加商品</button>
            <button id="goods-check" class="layui-btn layui-btn-warm layui-btn-sm" option="0"><i class="layui-icon">&#xe616;</i>商品审核</button>
        </div>
        <div class="layui-input-inline layui-form" style="width:200px;position: absolute;right:620px;top:0;">
            <select name="modules" lay-verify="required" lay-search="">
                <option value="">显示所有商家</option>
                <option value="1">layer</option>
                <option value="2">form</option>
                <option value="3">layim</option>
                <option value="4">element</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" style="width:160px;position: absolute;right:440px;top:0;">
            <select name="modules" lay-verify="required" lay-search="">
                <option value="">显示所有分类</option>
                <option value="1">layer</option>
                <option value="2">form</option>
                <option value="3">layim</option>
                <option value="4">element</option>
                <option value="5">laytpl</option>
                <option value="6">upload</option>
            </select>
        </div>
        <div class="layui-input-inline layui-form" style="width:100px;position: absolute;right:320px;top:0;">
            <select name="modules" lay-verify="required" lay-search="">
                <option value="">全部</option>
                <option value="1">未审核</option>
                <option value="2">已审核</option>
            </select>
        </div>
        <div class="tool-search">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入商品名称或编码"
                   class="layui-input">
            <div class="search-btn">
                <img src="./static/icon/search.svg" />
            </div>
        </div>
    </div>
    <div id="goods-list-table"></div>
</div>
<script type="text/html" id="goodsTpl">
    <div class="goods-thumb-box">
        <img id="goods-thumb" src="static/images/tx.jpg" style="width:60px;"/>
        <div class="goods-qrcode">
            <div class="bg-qrcode"></div>
            <img src="static/icon/qrcode.svg" class="qrcode" data-id="{{d.id}}" />
        </div>
    </div>
    <div style="float:left;margin-left:10px;font-size:10px;line-height: 20px;">
        <p style="margin-top:10px;">{{d.goodsName}}</p>
        <p style="color: #EC5151;">￥{{d.shopPrice}}</p>
        <p style="color: #ffffff;"><span style="padding:2px 5px;background: #FC592D;border-radius: 2px;">零食</span></p>
    </div>
</script>
<script type="text/html" id="mallTpl">
    <span style="font-weight: bold;color:#666666;font-size:13px;">阿创自营店</span>
</script>
<script type="text/html" id="selTpl">
   <div style="line-height: 26px;font-size:12px;">
       货号：ECS000895
   </div>
   <div style="line-height: 26px;font-size:12px;">
       推荐：<input type="checkbox" name="close" lay-skin="switch" lay-text="是|否">
   </div>
   <div style="line-height: 26px;font-size:12px;">
       显示：<input type="checkbox" name="close" lay-skin="switch" lay-text="是|否">
   </div>
</script>
<script type="text/html" id="checkTpl">
    <div style="font-size:12px;">无需审核</div>
</script>
<script type="text/html" id="promoteTpl">
    <div style="line-height: 28px;font-size:14px;color: #EC5151;">
        <img src="./static/icon/promote.svg"/>￥18.8
    </div>
    <div style="line-height: 18px;font-size:12px;color: #ffffff;background: #fca75f;padding-left:5px;border-radius: 2px;">
        2018-03-16 05:00
    </div>
    <div style="line-height: 18px;margin-top:5px;font-size:12px;color: #ffffff;background: #fca75f;padding-left:5px;border-radius: 2px;">
        2018-03-18
    </div>
</script>
<script type="text/html" id="actionBar">
    <div style="line-height: 20px;">
        <button class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">&#xe615;</i>查看</button>
    </div>
    <div style="line-height: 20px;margin-top:6px;">
        <button class="layui-btn layui-btn-xs"><i class="layui-icon">&#xe642;</i>编辑</button>
    </div>
    <div style="line-height: 20px;margin-top:6px;">
        <button class="layui-btn layui-btn-danger layui-btn-xs"><i class="layui-icon">&#xe640;</i>删除</button>
    </div>
</script>
<script type="text/javascript">
    $(function () {
        layui.table.render({
            elem: '#goods-list-table'
            ,url: ctx + '/goods/page'
            , request: {
                pageName: 'index'
                , limitName: 'size'
            }
            , response: {
                countName: 'total' //数据总数的字段名称，默认：count
            }
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'id', width:80, title: '编号'}
                ,{field:'goodsName', minWidth:180, maxWidth:220, title: '商品名称', templet: '#goodsTpl'}
                ,{width:150, title: '商家名称', templet: '#mallTpl'}
                ,{width:170, title: '货号/推荐/状态', templet: '#selTpl'}
                ,{field:'sortOrder', minWidth:80, maxWidth:150, title: '排序'}
                ,{field:'goodsNum', title: 'SKU/库存'}
                ,{width:140, title: '促销信息', templet: '#promoteTpl'}
                ,{width:100, title: '商品状态', templet: '#checkTpl'}
                ,{width:100, title: '操作', align:'center', fixed: 'right', toolbar: '#actionBar'}
            ]]
            ,page: true
            ,done:function(){
                //鼠标移入移除效果
                $("div.goods-thumb-box").hover(
                    function(){
                        var _that = $(this);
                        _that.find(".goods-qrcode").show();
                        $(this).find(".bg-qrcode").animate({
                            'opacity':.5
                        }, 500);
                    },
                    function(){
                        var _that = $(this);
                        $(this).find(".bg-qrcode").animate({
                            'opacity':0
                        }, 500, function () {
                            _that.find(".goods-qrcode").hide();
                        });
                    }
                );

                //弹出二维码扫描支付
                $(".goods-qrcode img.qrcode").click(function () {
                    layer.alert($(this).attr("data-id"));
                });
            }
        });


        //批量审核商品
        $("button#goods-check").off("click").on("click", function () {
            layer.alert($(this).attr("data-id"));
        });

        //添加商品执行跳转
        $("button#goods-check").off("click").on("click", function () {
            var checkStatus = layui.table.checkStatus('goods-list-table')
                ,data = checkStatus.data;
            var ids = new Array();
            $.each(data, function(i, obj){
                ids.push(obj.id);
            });
            layer.alert(JSON.stringify(ids));
        });

        layui.form.render(); //更新全部;
    })
</script>